<template>
    <div class="commodity-details">
        <Header style="z-index:1025">
            <header-menu :index="'3-4'"></header-menu>
        </Header>
        <commodity-top></commodity-top>
        <commodity-nav :titleList="titleList"></commodity-nav>
        <div class="container clearfix">
           <div class="commodity-appointment clearfix">
               <div class="commodity-Img">
                   <div class="commodity-bigImg">
                       <img :src= $Url+ImgUrl style="width: 100%;height: 100%" >
                   </div>
                   <div class="little_img clearfix" >
                       <ul>
                           <li @click='getIndex(img)' v-for="(img,k) in imgUrl" :class="{'active':img===ImgUrl}" v-if='k<4'>
                               <img :src= $Url+img>
                           </li>
                       </ul>
                   </div>
               </div>
               <div class="commodity-text">
                  <div class="commodity-title">
                    <h1>{{userlist.name}}</h1>
                      <p class="clearfix"><span>包含项目</span> <span :class="{'active':isShow===true}">玻尿酸去黑眼圈 玻尿酸填充卧蚕 玻尿酸隆鼻 玻尿酸丰唇 玻尿酸 玻尿酸去黑眼圈 玻尿酸填充卧蚕 玻尿酸隆鼻 玻尿酸丰唇 玻尿酸</span> <img src="../../assets/Business/xiasanjiao.png" alt="" @click="show()"></p>
                      <p class="clearfix" v-if="sauts==2">医院医生 <span>{{userlist.hospital}}</span></p>
                      <p class="clearfix" v-if="sauts==1">商&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;家<span>&nbsp;{{userlist.factory}}</span></p>
                  </div>
                   <div class="commodity-price">
                         <span>红粉价</span> <b><span>￥</span>{{userlist.nowprice}}</b><span>￥{{userlist.price}}</span><span>{{userlist.sale}}折</span>
                          <p><span><img src="../../assets/commodity/xing.png" alt=""></span><span><img src="../../assets/commodity/fenxiang.png" alt=""></span><span><img src="../../assets/commodity/shouji.png" alt=""></span>手机享优惠</p>
                   </div>
                   <div class="Reservation-number clearfix">
                      <ul>
                          <li>
                              <p>881</p>
                              <p>已预约</p>
                          </li>
                          <li>
                              <p>881</p>
                              <p>相关日记</p>
                          </li>
                          <li>
                              <p>881</p>
                              <p>总体评价</p>
                          </li>
                      </ul>
                   </div>
                   <div class="fuwu">
                       <div class="clearfix">
                           <span>服务项</span>
                           <p>
                               <span><img src="../../assets/commodity/gou.png" alt="">粉红保障</span>
                               <span><img src="../../assets/commodity/gou.png" alt="">闪电退</span>
                               <span v-if="userlist.moneytext===1"><img src="../../assets/commodity/gou.png" alt="">写日记</span>
                               <span v-if="userlist.moneytext===1">{{userlist.moneytext}}</span>
                               <!--<span>详情</span>-->
                           </p>
                       </div>
                       <div class="clearfix tequan">
                           <span>特权专享</span>
                           <p>
                               <span><img src="../../assets/commodity/fen.png" alt="">粉红保障</span>
                               <span>￥490.47x9期，支持小额白条 <img src="../../assets/commodity/gantan.png" alt=""></span>
                           </p>
                           <p>
                               <span><img src="../../assets/commodity/di.png" alt="">红包抵扣</span>
                               <span>红包抵扣预约金<b>199</b>元</span>
                           </p>
                           <p>
                               <span><img src="../../assets/commodity/juan.png" alt="">尾款红包</span>
                               <span>满5000减300</span>
                               <span>满5000减300</span>
                               <span>满5000减300</span>
                               <span>更多>></span>
                           </p>
                       </div>
                       <div class="clearfix fuwux" v-if="sauts==2">
                           <span>服务项目</span>
                           <p>
                               <span  :class="timeIndex === i.id ? 'active' : ''"  v-for="i in fuwu" :key="i.id" @click="selectSort(i.id)">{{i.name}}</span>
                           </p>
                       </div>
                       <div class="clearfix fuwux" style="padding-left: 70px" v-if="sauts==1">
                           <el-input-number v-model="num1" @change="handleChange" :min="1" :max="1000" label="描述文字"></el-input-number>
                       </div>
                       <div class="clearfix zhifu" >
                           <span>支付方式</span>
                           <div>
                               <div v-if="sauts==2">
                                   <span>预付金￥{{userlist.yprice}}</span>
                                   <span>到院再付￥{{userlist.zprice}}</span>
                               </div>
                               <div v-if="sauts==1" @click="car()">加入购物车</div>
                               <div @click="buy()">立即支付</div>
                           </div>
                       </div>
                   </div>
               </div>

           </div>
            <div class="content">
                <div class="left">
                    <list-item :list="list"></list-item>
                </div>
                <div class="right">
                    <content-nav :navList="projectList" :userlist='userlist'  :width="218" :width1="227" :sauts="sauts"></content-nav>
                </div>
            </div>
        </div>
        <bottom-icon></bottom-icon>
        <Footer>
            <page-footer></page-footer>
        </Footer>
    </div>
</template>

<script>
    import HeaderMenu from '../../components/Header/'
    import CommodityTop from '../../components/Commodity/CommodityDe/CommodityTop'
    import CommodityNav from '../../components/Commodity/CommodityDe/CommodityNav'
    import ListItem from '../../components/Commodity/CommodityDe/ListItem'
    import ContentNav from '../../components/Commodity/CommodityDe/ContentNav'
    import BottomIcon from '../../components/BottomIcon/'
    import PageFooter from '../../components/Footer/'
    export default {
        name: "CommodityDe",
        components :{
            HeaderMenu,
            CommodityTop,
            CommodityNav,
            ListItem,
            ContentNav,
            BottomIcon,
            PageFooter
        },
        data () {
            return {
                imgUrl: [],
                ImgUrl:'',
                isShow:false,
                list:[
                    {id:1,type:1,title:'医院介绍',titleright:'医院主页',
                        child:[
                            {Img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',name:"北京新星靓医疗",shanchang:"美体塑形、自体脂肪填充、玻尿酸",jianjie:"北京新星靓整形是率先提出以北京新星靓整形是率先提出以",dizhi:'北京海淀区学院路富润家园底商',dianhua:'4009006660-8258'}
                        ],

                        },
                    {
                        id: 2, type: 2, title: '医生介绍', titleright: '医生主页',
                        child: [
                            {
                                Img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',
                                name: "葛美丽",
                                shanchang: "美体塑形、自体脂肪填充、玻尿酸",
                                yuyue: 111,
                                zixun: 123,
                                anlie: 50
                            },
                        ],
                    },
                    {id:3,type:2,title:'医生介绍',titleright:'医生主页',
                        child:[
                            {  Img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',name:"葛美丽",shanchang:"美体塑形、自体脂肪填充、玻尿酸",yuyue:111,zixun:123,anlie:50}
                        ],
                     },
                    {id:4,type:3,title:'同院热门预约',titleright:'更多',
                        child:[
                            {  Img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',text:"【自体脂肪填充】【清华羽泉@吕晓杰】自体脂肪面部填充一个部位",newprice:111,noldprice:123,num:50},
                            {  Img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',text:"【自体脂肪填充】【清华羽泉@吕晓杰】自体脂肪面部填充一个部位",newprice:111,noldprice:123,num:50},
                            {  Img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',text:"【自体脂肪填充】【清华羽泉@吕晓杰】自体脂肪面部填充一个部位",newprice:111,noldprice:123,num:50},
                            {  Img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',text:"【自体脂肪填充】【清华羽泉@吕晓杰】自体脂肪面部填充一个部位",newprice:111,noldprice:123,num:50},
                            {  Img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',text:"【自体脂肪填充】【清华羽泉@吕晓杰】自体脂肪面部填充一个部位",newprice:111,noldprice:123,num:50},
                        ],
                    },

                ],
                titleList:[
                    {id:1,name:"首页",show:false,path:'/commoditydetails/home'},
                    {id:2,name:"预约",show:false,path:'/commoditydetails/index'},
                    {id:3,name:"医生",show:false,path:'/commoditydetails/doctor'},
                    {id:4,name:"日记",show:true,path:'/commoditydetails/diary',num:123},
                    {id:5,name:"资讯相册",show:true,path:'/commoditydetails/album'},
                    {id:6,name:"发表",show:false,path:'/commoditydetails/publish',num:123},
                    {id:7,name:"粉丝",num:200,show:false,path:'/commoditydetails/fans'},
                    {id:8,name:"关注",num:200,show:false,path:'/commoditydetails/follow'},
                ],
                userlist:[],
                group_id:'',
                place_id:'',
                projectList:'',
                type:'',
                num1: 1,
                fuwu:[
                    {id:1,name:'光子嫩肤/果酸/补水',show:true},
                    {id:2,name:'最火光子嫩肤',show:false},
                    {id:3,name:'抗敏祛痘4次',show:false},
                ],
                timeIndex:1,
                sauts:'',
                id:''
            }
        },
        created () {
          this.init()
          this.getinfo()

        },
        methods :{
            //点击小图片时将图片路径赋值给大图
            getIndex(imgUrl){
                this.ImgUrl = imgUrl;
            },
            show () {
                this.isShow=true
            },
            init () {
                this.id = this.$route.query.id
                this.sauts = this.$route.query.sauts
                let  _this = this
                if(this.sauts==2){
                    _this.$post('/api/shop/getProjectInfo',
                        {
                            project_id:_this.id,
                        },function (res) {
                            _this.userlist = res.data
                            _this.imgUrl=res.data.images
                            _this.ImgUrl =res.data.images[0]
                        },function (err,errmsg,errcode) {
                            _this.$message.error(errmsg);

                        }
                    )
                }
                if(this.sauts==1){
                    _this.$post('/api/shop/getGoodsInfo',
                        {
                            good_id:_this.id,

                        },function (res) {
                            _this.userlist = res.data
                            _this.imgUrl=res.data.images
                            _this.ImgUrl =res.data.images[0]
                        },function (err,errmsg,errcode) {
                            _this.$message.error(errmsg);

                        }
                    )
                }
            },
            getinfo () {
                let  _this = this
                _this.$post('/api/shop/getProjectList',
                    {
                        group_id:_this.group_id,
                        place_id: _this.place_id
                    },function (res) {
                        _this.$set(res.data,'length',res.data.count)
                        let list = Array.from(res.data);
                        list.forEach(function (i) {
                            _this.$set(i,'type', 2);
                        })
                        _this.projectList=list
                    },function (err,errmsg) {
                        _this.$message.error(errmsg);
                    }
                )
            },
            handleChange(value) {

            },
            buy () {
                let  _this = this
                if(this.sauts==1){
                   _this.$post('/api/shop/addOrder',
                       {
                           token:_this.$token,
                           good_id:_this.id,
                           num: _this.num1
                       },function (res) {
                           _this.$message.success(res.msg);
                       },function (err,errmsg) {
                           _this.$message.error(errmsg);
                       }
                   )
               }
                if(this.sauts==2){
                    _this.$post('/api/shop/bookProject',
                        {
                            token:_this.$token,
                            project_id:_this.id,
                            project_content:_this.timeIndex
                        },function (res) {
                            _this.$message.success(res.msg);
                        },function (err,errmsg) {
                            _this.$message.error(errmsg);
                        }
                    )
                }
            },
            selectSort (item) {
              this.timeIndex = item
            },
            car () {
                this.$message.success('加入成功');
            }
        }
    }
</script>
<style scoped lang="less">
    @import "../../style/style";
    .commodity-details{
        .commodity-appointment{
            margin-top: 20px;
            /*height: 527px;*/
            border: solid 1px #e0e0e0;
            padding: 10px 0px 10px 10px;
            .commodity-Img{
                width: 400px;
                float: left;
                .commodity-bigImg{
                    width: 400px;
                    height: 400px;
                }
                .little_img{
                    margin-top: 10px;
                    ul{
                        >:first-child{
                            margin-left: 0;
                        }
                        .active{
                            border: 1px solid @theme-color-dark;
                        }
                        li{
                            float: left;
                            width:90px;
                            height: 90px;
                            border: 1px solid #e0e0e0;
                            padding: 3px;
                            margin-left: 13px;
                            img{
                                width: 84px;
                                height: 84px;
                            }
                        }
                    }
                }
            }
            .commodity-text{
                width: 768px;
                float: left;
                .commodity-title{
                    padding-left: 20px;
                    h1{
                        font-size: 20px;
                        font-weight: normal;
                        font-stretch: normal;
                        letter-spacing: 0px;
                        color: #656565;
                        padding-top:5px;
                        padding-bottom: 30px;
                    }
                    .active{
                        height: auto !important;
                    }
                    >:nth-child(2){
                        >:first-child{
                            width: 50px;
                            color:  #656565;
                            margin-left: 0;
                        }
                        >span{
                            display: block;
                            width: 350px;
                            height: 15px;
                            float: left;
                            overflow: hidden;
                        }
                    }
                    p{
                        color: #656565;
                        font-size: 12px;
                        padding-bottom: 5px;
                        span{
                            color: @theme-color-dark;
                            margin-left: 10px;
                        }
                        img{
                            margin-left: 10px;
                        }
                    }
                }
                .commodity-price{
                    padding-left: 20px;
                    margin-top: 5px;
                    height: 77px;
                    line-height: 77px;
                    background-color: #f7f9f8;
                    span{
                        font-size: 12px;
                        font-weight: normal;
                        font-stretch: normal;
                        letter-spacing: 0px;
                        color: #999999;
                    }
                    >b{
                        color: #ff5625;
                        font-size: 32px;
                        margin-left: 20px;
                        >span{
                            font-size: 20px;
                            color: #ff5625;
                        }
                    }
                    >:nth-child(3){
                        font-size: 13px;
                        color: #666666;
                        text-decoration:line-through;
                        margin-left: 20px;
                    }
                    >:nth-child(4){
                        background-color: #ff5371;
                        color: white;
                        font-size: 12px;
                        text-decoration:none;
                        padding: 2px;
                        margin-left: 8px;
                    }
                    p{
                        width: 400px;
                        float: right;
                        line-height: 85px;
                        height: 77px;
                        vertical-align: top;
                        font-size: 12px;
                        color:@theme-color-dark;
                        span{
                            margin-left: 90px;
                            display: block;
                            float: left;
                            margin-top: 2px;
                        }
                        >:last-child{
                            margin-right: 5px;
                        }
                    }
                }
                .Reservation-number{
                    margin-left: 20px;
                    padding: 7px 0;
                    border-bottom: 1px dashed #dcdcdc;
                    ul{
                        li{
                            float: left;
                            width: 33%;
                            border-right: 1px solid #dcdcdc;
                            text-align: center;
                            color: #999999;
                            font-size: 12px;
                            >:first-child{
                                color: @theme-color-dark;
                                font-size: 18px;
                            }

                        }
                        >:last-child{
                            border-right: none;
                        }
                    }
                }
                .fuwu{
                    padding: 20px;
                    >div{
                        padding-bottom: 15px;
                        >span{
                            float: left;
                            margin-right: 20px;
                            display: block;
                            width: 48px;
                            color: #656565;
                            font-size: 12px;
                        }
                        p{
                            width: 80%;
                            float: left;
                            padding-bottom: 5px;
                            >span{
                                vertical-align: top;
                                margin-right: 15px;
                                color: #333333;
                                font-size: 12px;
                                img{
                                    margin-right: 5px;
                                }
                            }
                        }
                    }
                    .tequan{
                       >span{
                           padding-bottom: 40px;
                       }
                        >:last-child{
                            >:nth-child(2){
                                border: solid 1px  @theme-color-dark;
                                color: @theme-color-dark;
                            }
                            >:nth-child(3){
                                border: solid 1px  @theme-color-dark;
                                color: @theme-color-dark;
                            }
                            >:nth-child(4){
                                border: solid 1px  @theme-color-dark;
                                color: @theme-color-dark;
                            }
                        }
                        p{
                            >:first-child{
                                border-right: 1px solid #333333;
                                padding-right: 20px;
                            }
                            b{
                                color: #f54995;
                            }
                        }
                    }
                    .fuwux{
                        .active{
                            border: solid 1px #fc5528 !important;
                            color:#fc5528 !important;
                            padding: 8px 10px;
                        }
                        >p{
                           span{
                                border: solid 1px  #cccccc;
                                color:#666666;
                                padding: 8px 10px;
                                cursor: pointer;
                            }
                        }
                    }
                    .zhifu{
                        >span{
                            padding-top: 20px;
                        }
                        >div{

                            >div{
                                width: 220px;
                                height: 60px;
                                background-color: #ffffff;
                                border: solid 2px #fc5528;
                                text-align: center;
                                line-height: 60px;
                                float: left;
                                color: #fd5528;
                                font-size: 16px;
                                margin-right: 15px;
                                cursor: pointer;
                                >span{
                                    width: 100%;
                                    display: block;
                                    height:25px;
                                    line-height: 30px;
                                }
                                >:first-child{
                                    padding-top: 5px;
                                }
                                >:last-child{
                                    color: #fd5528;
                                    font-size: 12px;
                                    opacity: 0.5;
                                }
                            }
                            >:last-child{
                                background-color: #fc5528;
                                color: white;
                            }
                        }

                    }


                }
            }

    }
        .content{
            margin-top: 35px;
            .right{
                /*border: solid 1px #e7e7e7;*/
                width: 925px;
                float: right;
            }
            .left{
                width: 240px;
                float: left;
            }
        }
}

</style>